<!---组件之间的切换-->

<!---引入vue框架-->
<script src="vue.js"></script>
<!--界面显示-->
<div id="app">
    <a href="#"@click.prevent="flag?flag:flag=!flag">登录</a>
    <a href="#"@click.prevent="flag?flag=!flag:flag">注册</a>
    <login v-if="flag"></login>
    <reg v-else></reg>

</div>
<!--登录界面模板-->
<template id="loginTmp">
    <div>
        <table border="1">
            <tr>
                <td><label>用户名</label></td>
                <td><input type="text" id="username" maxlength="20"/></td>
            </tr>
            <tr>
                <td><label>密码</label></td>
                <td><input type="password" id="pwd1" maxlength="20"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button @click="tijiao">登录</button>
                </td>
            </tr>
        </table>
    </div>
</template>
<!----注册界面模板-->
<template id="regTmp">
    <div>
        <table border="1">
            <tr>
                <td><label>用户名</label></td>
                <td><input type="text" id="username" maxlength="20"/></td>
            </tr>
            <tr>
                <td><label>密码</label></td>
                <td><input type="password" id="pwd1" maxlength="20"/></td>
            </tr>
            <tr>
                <td><label>确认密码</label></td>
                <td><input type="password" id="pwd2" maxlength="20"/></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button @click="zhuce" style="width: 100%;">注册</button>
                </td>
            </tr>
        </table>
    </div>
</template>
<!---脚本定义-->
<script>
    //注册登录组件
    Vue.component("login",{
        template:'<div>登录页面</div>'
       
            })
    Vue.component("reg",{
        template:'<div>注册页面</div>'
       
            })
       
    var vue=new Vue({
        el:'#app',
        data:{
            flag:true,
        }
    })
       // 注册登录组件 
 Vue.component("login",{ 
   // 在模板中在外层一定放一个div 
   // template: '<div>登录页面<div>' 
    template: '#loginTmp', 
  methods:{ 
   tijiao(){ 
   alert("准备登录"); 
   }
}
   }) 
   // 注册注册组件 
   Vue.component("reg",{ 
   // 在模板中在外层一定放一个div 
   // template: '<div>注册页面</div> 
   template: '#regTmp', 
  methods:{ 
   zhuce(){ 
   console.log("登录信息注册") 
   }
}
  
   })
   // 注册登录组件 
 Vue.component("login",{ 
   // 在模板中在外层一定放一个div 
   // template: '<div>登录页面<div>' 
   template: '#loginTmp', 
  methods:{ 
   tijiao(){ 
   alert("准备登录"); 
    }
}
   }) 
   // 注册注册组件 
   Vue.component("reg",{ 
   // 在模板中在外层一定放一个div 
   // template: '<div>注册页面</div> 
   template: '#regTmp', 
  methods:{ 
   zhuce(){ 
   console.log("登录信息注册") 
  
       }
     }
   })
</script>    